<template>
  <div>
    <Header :back="true" :application='application'></Header>
    <div style="display:flex;justify-content:flex-end;margin:.3rem 1rem">
      <van-button type="primary" plain size="mini" icon="plus" @click="goAdd">新增发票</van-button>
    </div>
    <van-tabs v-model="active" animated>
      <van-tab v-for="(item,i) in tabs" :key="i" :title="item.name">
        <div class="tab_cont">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="ele in list" :key="ele" :title="item.name+ele" />
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Header from "@/components/header";
export default {
  components: {
    Header,
  },
  data() {
    return {
      application: true,
      tabs: [
        {
          name: "代开发票",
        },
        {
          name: "已开发票",
        },
        {
          name: "取消代开",
        },
      ],
      active: "",
      list: [],
      loading: false,
      finished: false,
      value:''
    };
  },
  methods: {
    goAdd(){
      this.$router.push('fillBill')
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
  },
};
</script>
<style lang="less" scoped>
.pop_title {
  margin-top: 1rem;
  z-index: 9999 !important;
}

/deep/.van-tabs__line {
  position: absolute;
  bottom: 15px;
  left: 0;
  z-index: 1;
  width: 33vw;
  height: 3px;
  background-color: #07c160;
  border-radius: 3px;
}

.tab_cont {
  padding: 0 1.2rem;
}
</style>